<template>
    <div class="page-content">
        <div style="background-color: #FFFFFF; padding-bottom: 2px;">
            <u-search placeholder="请输入搜索关键词" shape="square" v-model="searchKeyword" @search="onSearch" @custom="onSearch"></u-search>

            <view class="goods-list" style="height: 100px; display: flex; margin-bottom: 6px;"
                  v-for="(item, index) in tbGoodsList" :key="index">

                <view @click.stop.prevent="select(item)">
                    <myImg :obj="item" :sysFile="{fkId: item.id, typeMark: 'thumbnail'}" :key="item.id"
                           :customStyle="'pointer-events: none; height: 100px;  width:100px; background-size: cover; background-repeat: no-repeat; background-position: center;'"
                           :defaultUrl="'/static/default-image/goods.jpg'"
                           :imageView="'imageView2/1/w/200/h/200'"
                    ></myImg>
                </view>
                <view style="padding: 6px 5px 5px 10px; width: 100%;" @click.stop.prevent="select(item)">
                    <view style="height: 60px; overflow: hidden;">
                        {{item.title}}
                    </view>
                    <view style="overflow: hidden; color: grey; height: 19px;">
                        {{item.subTitle | toEmptyStr}}
                    </view>
                    <view style="display: flex; border-bottom: 1px solid #eeeeee; padding-bottom: 4px;"
                          :style="{'border-bottom': tbGoodsList.length - 1 === index ? '0px' : '1px solid #eeeeee'}">
                        <view style="font-weight: bold; color: red;">
                        </view>
                    </view>
                </view>
            </view>
        </div>

        <div style="padding-top: 10px; padding-bottom: 10px;">
            <u-loadmore :status="pagination.status" bg-color="#eeeeee"/>
        </div>
    </div>
</template>

<script>

    import myImg from '@/components/my-img'
    import {TbGoodsService} from "../../../../dev/services/tb-goods.service";
    import {CommonUtil} from "../../../../dev/core/utils/common.util";

    export default {
        data: function () {
            return {
                searchKeyword: '',
                tbGoodsList: [],
            }
        },
        components: {
            myImg
        },
        // 上拉加载
        onReachBottom: function () {
            if (this.pagination.hasNextPage) {
                this.doInfinite()
            }
        },
        onShow() {
            this.doInfinite();
        },
        methods: {
            onSearch(event) {
                this.searchKeyword = CommonUtil.trim(this.searchKeyword);
                this.doRefresh(this.tbGoodsList);
            },
            select(item, index) {
                this.objParams.goodsId = item.id;
                this.objParams.goodsTitle = item.title;
                CommonUtil.toastNavigateBack();
            },
            doInfinite() {
                const _self = this;
                new TbGoodsService().findTableList({
                    pagination: _self.pagination,
                    data: {
                        communityId: _self.globalVariable.userInfo.tbCommunity.id,
                        title: this.searchKeyword,
                        status: "1",
                        deleted: false
                    }
                }).then(result => {
                    _self.pagination.refreshPage(result);
                    _self.tbGoodsList = [..._self.tbGoodsList, ...result.list];
                })
            },
        },
    }
</script>

<style lang="scss" scoped>
</style>
